//启动裁剪插件
// 获取裁剪区域的dom元素
var $image = $('#image')

// 1.2 配置选项
const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
}

// 1.3 创建裁剪区域
$image.cropper(options)

// 选择头像
$('#btnChooseImage').on('click', function () {
    $('#file').click()
})

// change
$('#file').on('change', function () {
    // 获取选中的图片
    let f = $(this)[0].files[0]
    // 把获取的图片对象转换成图片路径
    let u = URL.createObjectURL(f)
    // 把转化的路径赋值给img的src
    $image.cropper('destroy') //销毁旧的裁剪区域
        .attr('src', u)  //重新设置图片路径
        .cropper(options)  //重新初始化裁剪区域
})

// 上传头像
$('#btnUpload').on('click', function () {
    // 把选中的部分图片抠选出来
    var dataURL = $image
        // 把选中的图片抠选出来，但是抠选的是对象
        .cropper('getCroppedCanvas', {
            // 创建一个 Canvas 画布
            width: 100,
            height: 100
        })
        // 把抠选的对象转成 字符串 （base64字符串）
        .toDataURL('image/png')

    // 调用接口把base64图片传输到后台
    $.ajax({
        url: "/my/update/avatar",
        type: "post",
        data: {
            avatar: dataURL
        },
        success: function (msg) {
            console.log(msg)
            if (msg.status == 0) {
                window.parent.getList()
            }
        }
    })



})
